import {ModalForm, ProFormText, ProFormTextArea} from '@ant-design/pro-components';
import React from 'react';

export type CreateOrUpdateFormProps = {
  onCancel: (flag?: boolean, formVals?: API.DataMatrix) => void;
  onSubmit: (values: API.DataMatrix) => Promise<void>;
  updateModalOpen: boolean;
  values?: Partial<API.DataMatrix>;
  title?:string;
};

const CreateOrUpdateForm: React.FC<CreateOrUpdateFormProps> = (props) => {

  return (<ModalForm
      title={props?.title}
      layout={"horizontal"}
      labelAlign={"right"}
      labelCol={{span: 6}}
      width="700px"
      open={props.updateModalOpen}
      onFinish={props.onSubmit}
      modalProps={{destroyOnClose: true, onCancel: () => props.onCancel()}}
    >
      <ProFormText initialValue={props?.values?.id} hidden={true} name='id'/>
      <ProFormText
        initialValue={props.values?.groupKey}
        rules={[
          {
            required: true,
            message: 'group Key不能为空',
          },
        ]}
        width="md"
        label="group Key"
        name="groupKey"
      />
      <ProFormText
        initialValue={props.values?.master}
        rules={[
          {
            required: true,
            message: 'master不能为空',
          },
        ]}
        width="md"
        label="master"
        name="master"
      />
      <ProFormText
        initialValue={props.values?.slave}
        rules={[
          {
            required: true,
            message: 'slave不能为空',
          },
        ]}
        width="md"
        label="slave"
        name="slave"
      />
      <ProFormTextArea
        initialValue={props.values?.description}
        width="md"
        label="描述"
        name="desc"
      />

    </ModalForm>
  );
};

export default CreateOrUpdateForm;
